<template>
  <div class="not-container">
    <img src="@/assets/images/403.png" class="not-img" alt="403" />
    <div class="not-detail">
      <h4>抱歉，您的账号已被其他人登录~🙅‍♂️🙅‍♀️</h4>
      <div>
        <h4 style="display: inline-block; color: #f00">{{ time }}</h4>
        <h4 style="display: inline-block">秒后自动跳转</h4>
      </div>
      <el-button type="primary" @click="goLogin"> 立即跳转 </el-button>
    </div>
  </div>
</template>

<script setup lang="ts" name="101">
import { logout } from '@/utils/token'
import { ref, onBeforeUnmount } from 'vue'
const time = ref(10)
const intervalId = setInterval(function () {
  time.value--
  if (time.value === 0) {
    clearInterval(intervalId)
    goLogin()
  }
}, 1000)

onBeforeUnmount(() => {
  if (intervalId) {
    clearInterval(intervalId)
  }
})

// 在某个时间点取消定时器
// setTimeout(function () {
//   console.log('取消定时器')
//   clearInterval(intervalId)
// }, 5000)

function goLogin() {
  logout(false)
}
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
